import { Card, List, Modal } from 'antd'
import { useState } from 'react'
import PublicPictureDetail from '../pages/home/component/PublicPictureDetail'
import PrivatePictureDetail from '../pages/user/component/PrivatePictureDetail'

const { Meta } = Card

type ImageGridProps = {
    columnCount?: number;
    gutter?: number
    data: ImageCardProps[];
    type: number;
}
export type ImageCardProps = {
    id: number;
    src: string;
    title: string;
    desc: string;
}
const ImageGrid: React.FC<ImageGridProps & React.RefAttributes<HTMLDivElement>> = (props: ImageGridProps) => {
    const [open, setOpen] = useState<boolean>(false)
    const { columnCount = 4, gutter = 16, data } = props
    // const colSpan = 24 / columnCount
    const [current, setCurrent] = useState(0)
    return (
        <>
            <Modal
                open={open}
                footer={null}
                width='70%'
                onCancel={() => setOpen(false)}
            >
                {
                    props.type === 2 ?
                        <PublicPictureDetail
                            id={current}
                        /> :
                        <PrivatePictureDetail
                            id={current}
                        />
                }

            </Modal>
            <List
                grid={{ gutter: gutter, column: columnCount }}
                dataSource={data}
                renderItem={
                    (i) => {
                        return (
                            <List.Item>
                                <Card cover={<img src={i.src} width={300} height={200}/>} onClick={() => {
                                    setOpen(true)
                                    setCurrent(i.id)
                                }}>
                                    <Meta title={<div style={{ height: 20 }}>{i.title}</div>} description={<div style={{ height: 50 }}>{i.desc}</div>} />
                                </Card>
                            </List.Item>
                        )
                    }
                }
            />
            {/* <Row gutter={[horizontalGutter, verticalGutter]}>
                {data.map((i) => <Col span={colSpan} key={i.id}>
                    
                </Col>)}
            </Row> */}
        </>
    )
}

export default ImageGrid